<template>
  <layout title="navbar导航栏" :custom-content-style="customLayoutStyle">

    <layout-content title="基础使用">
      <tn-navbar height="40px" z-index="1">图鸟科技</tn-navbar>
    </layout-content>

    <layout-content title="不显示底部阴影">
      <tn-navbar height="40px" z-index="1" :bottom-shadow="false">图鸟科技</tn-navbar>
    </layout-content>

    <layout-content title="毛玻璃效果">
      <tn-navbar height="40px" z-index="1" frosted-glass>图鸟科技</tn-navbar>
    </layout-content>

    <layout-content title="设置颜色">
      <view class="navbar-container">
        <tn-navbar height="40px" z-index="1" bg-color="tn-bg-indigo--light">图鸟科技</tn-navbar>
      </view>
      <view class="navbar-container">
        <tn-navbar height="40px" z-index="1" bg-color="tn-bg-indigo--light" color="tn-color-blue">图鸟科技</tn-navbar>
      </view>
      <view class="navbar-container">
        <tn-navbar height="40px" z-index="1" bg-color="tn-cool-bg-6">图鸟科技</tn-navbar>
      </view>
      <view class="navbar-container">
        <tn-navbar height="40px" z-index="1" frosted-glass frosted-glass-color="#01BEFF55">图鸟科技</tn-navbar>
      </view>
    </layout-content>

    <layout-content title="设置内容透明度">
      <view class="navbar-container">
        <tn-navbar height="40px" z-index="1" bg-color="tn-bg-indigo--light" opacity="50">图鸟科技</tn-navbar>
      </view>
    </layout-content>

    <layout-content title="返回区域配置">
      <view class="navbar-container">
        <tn-navbar height="40px" z-index="1" back-home-icon="home-fill">图鸟科技</tn-navbar>
      </view>
      <view class="navbar-container">
        <tn-navbar height="40px" z-index="1" back-home-icon="home-fill" back-icon="">图鸟科技</tn-navbar>
      </view>
      <view class="navbar-container">
        <tn-navbar height="40px" z-index="1" back-icon="left-arrow">图鸟科技</tn-navbar>
      </view>
      <view class="navbar-container">
        <tn-navbar height="40px" z-index="1" back-title="返回">图鸟科技</tn-navbar>
      </view>
      <view class="navbar-container">
        <tn-navbar height="40px" z-index="1" back-icon="">
          <template v-slot:back>
            <view class="custom-back__wrap tn-flex-center-start">
              <view class="custom-back tn-flex-center">
                <tn-icon icon="left-arrow"></tn-icon>
              </view>
            </view>
          </template>
          图鸟科技
        </tn-navbar>
      </view>
    </layout-content>

    <layout-content title="居中显示内容区域">
      <view class="navbar-container">
        <tn-navbar height="40px" z-index="1">
          <view class="custom-content">
            <tn-input border height="100%" :custom-style="customInputStyle" input-align="center" placeholder="请输入要搜索的内容"></tn-input>
          </view>
        </tn-navbar>
      </view>
      <view class="navbar-container">
        <tn-navbar height="40px" z-index="1" :is-back="false">
          <view class="custom-content">
            <tn-input border height="100%" :custom-style="customInputStyle" input-align="center" placeholder="请输入要搜索的内容"></tn-input>
          </view>
        </tn-navbar>
      </view>
    </layout-content>

    <layout-content title="不居中显示内容区域">
      <view class="navbar-container">
        <tn-navbar height="40px" z-index="1" :align-center="false">
          <view class="custom-content">
            <tn-input border height="100%" :custom-style="customInputStyle" input-align="center" placeholder="请输入要搜索的内容"></tn-input>
          </view>
        </tn-navbar>
      </view>
      <view class="navbar-container">
        <tn-navbar height="40px" z-index="1" :align-center="false" :is-back="false">
          <view class="custom-content">
            <tn-input border height="100%" :custom-style="customInputStyle" input-align="center" placeholder="请输入要搜索的内容"></tn-input>
          </view>
        </tn-navbar>
      </view>
    </layout-content>

    <layout-content title="忽略胶囊区域">
      <view class="navbar-container">
        <tn-navbar height="40px" z-index="1" :reserve-capsule="false">
          <view class="custom-content">
            <tn-input border height="100%" :custom-style="customInputStyle" input-align="center" placeholder="请输入要搜索的内容"></tn-input>
          </view>
        </tn-navbar>
      </view>
      <view class="navbar-container">
        <tn-navbar height="40px" z-index="1" :is-back="false" :reserve-capsule="false">
          <view class="custom-content">
            <tn-input border height="100%" :custom-style="customInputStyle" input-align="center" placeholder="请输入要搜索的内容"></tn-input>
          </view>
        </tn-navbar>
      </view>
      <view class="navbar-container">
        <tn-navbar height="40px" z-index="1" :align-center="false" :reserve-capsule="false">
          <view class="custom-content">
            <tn-input border height="100%" :custom-style="customInputStyle" input-align="center" placeholder="请输入要搜索的内容"></tn-input>
          </view>
        </tn-navbar>
      </view>
      <view class="navbar-container">
        <tn-navbar height="40px" z-index="1" :align-center="false" :is-back="false" :reserve-capsule="false">
          <view class="custom-content">
            <tn-input border height="100%" :custom-style="customInputStyle" input-align="center" placeholder="请输入要搜索的内容"></tn-input>
          </view>
        </tn-navbar>
      </view>
    </layout-content>

  </layout>

  <layout-doc v-model="showDoc" :content="docContent"></layout-doc>
  <doc-fab :z-index="99999" @click="handleDocFabClick"/>
</template>

<script lang="ts" setup>
import { CSSProperties, ref } from 'vue'
import { docContent } from './lib/doc'
import Layout from '@/components/layout/index.vue'
import LayoutContent from '@/components/layout/content.vue'
import LayoutDoc from '@/components/layout/doc.vue'
import DocFab from '@/components/doc-fab/index.vue'

import TnNavbar from '@/tuniao-ui/components/tn-navbar/src/Navbar.vue'
import TnIcon from '@/tuniao-ui/components/tn-icon/src/Icon.vue'
import TnInput from '@/tuniao-ui/components/tn-input/src/Input.vue'

const customLayoutStyle: CSSProperties = {
  padding: '30rpx 0'
}

// 弹出文档 
let showDoc = ref<boolean>(false)
const handleDocFabClick = () => {
  showDoc.value = true
}


const customInputStyle: CSSProperties = {
  borderRadius: '60rpx'
}
</script>

<style lang="scss" scoped>

.navbar-container {
  width: 100%;
  margin-top: 30rpx;
}

/** 自定义返回样式 start */
.custom-back {
  &__wrap {
    width: 100%;
    height: 100%;
  }
  background-color: #E6E6E6AA;
  color: #AAAAAA;
  font-weight: 500;
  height: 88%;
  width: 60%;
  border-radius: 40rpx;
  font-size: 38rpx;
  line-height: 1;
}
/** 自定义返回样式 end */

/* 自定义内容样式 start */
.custom-content {
  width: 100%;
  height: 70%;
}
/* 自定义内容样式 end */
</style>
